<template>
    <div id="waibox">
        <div class="nei shadow" v-for="(elem,i) of arr" :key="i" ></div>
    </div>
</template>


<script>
export default {
    data(){
        return {
            arr:new Array(100)
        }
    },
    methods:{
        show(){
            var elems = document.getElementById("waibox").children;
            //console.log(elems[0].classList[1]);
            //elems[0].classList.add("shadow");
            if(document.documentElement.scrollTop){
                var scrollTop = document.documentElement.scrollTop;
            }else{
                var scrollTop = document.body.scrollTop;
            }
            var clientHeight = document.documentElement.clientHeight;
            //console.log(clientHeight);
            for(var elem of elems){
                var top = elem.offsetTop - scrollTop;
                if(top < clientHeight - elem.offsetHeight/2){
                    elem.classList.remove("shadow");
                }
                if(top > clientHeight - elem.offsetHeight/3){
                    elem.classList.add("shadow");
                }
            }
        }
    },
    mounted () {
        window.addEventListener('scroll', this.show);
        this.show();
    }
}
</script>

<style>
    #waibox{
        background: #b2d0bb;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .nei{
        height: 100px;
        width: 150px;
        background: #dddbe8;
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 10px;
        border-radius: 5px;
        opacity: .7;
        transition: all ease 1s;
    }
    .shadow{
        opacity: 0;
        transform: translate(-7px,-8px);
    }
</style>